<script setup lang="ts">
import { h } from 'vue';

// 定义子组件的渲染函数
const PowerJack = { render: () => h('div', { class: 'power-jack' }) };
const USBJack = { render: () => h('div', { class: 'usb-jack' }) };
const Switch = { render: () => h('div', { class: 'switch' }) };
const Light = { render: () => h('div', { class: 'light' }) };

</script>

<template>
  <div class="power-strip">
    <div class="body">
      <USBJack/>
      <USBJack/>
      <USBJack/>
      <PowerJack/>
      <PowerJack/>
      <PowerJack/>
      <Switch/>
      <Light/>
    </div>
  </div>
</template>

<style scoped>
/* 保持之前修复后的样式 */
.power-strip {
  /*padding: 20px;*/
}

.power-strip .body {
  width: 8em;
  height: 30em;
  background-color: #ddd;
  border-radius: 1em;
  padding: 2em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
  box-shadow: 0em 2em 2em rgba(0, 0, 0, 0.5);
}

.usb-jack {
  width: 3em;
  height: 3em;
  background-color: #666;
  border-radius: 0.2em;
  position: relative;
}

.usb-jack::after {
  content: '';
  position: absolute;
  width: 2em;
  height: 0.2em;
  background-color: #ccc;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.2em;
}

.power-jack {
  width: 4em;
  height: 7em;
  background-color: #ccc;
  border-radius: 0.2em;
  position: relative;
  transform: rotateZ(90deg);
}

.power-jack::after {
  content: "▍▍";
  position: absolute;
  width: 1em;
  height: 1em;
  /*background-color: #555;*/
  /*border-radius: 50%;*/
  top: 1.5em;
  left: 1.8em;
  transform: translate(-0.5em, -0.2em);
}

.power-jack::before {
  content: "▍";
  position: absolute;
  width: 1em;
  height: 1em;
  /*background-color: #555;*/
  /*border-radius: 50%;*/
  top: 0.2em;
  left: 1.8em;
  /*transform: translate(0em, -1.4em);*/
}

.switch {
  width: 3em;
  height: 4em;
  background-color: #ccc;
  border-radius: 0.65em;
  /*margin-top: 1em;*/
  position: relative;
  cursor: pointer;
  border: 1px solid #999;
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.5);
}

.switch::after {
  content:'○';
  position: absolute;
  top: 0.3em;
  left: 0.9em;
  color: #999;
}

.light {
  width: 1em;
  height: 1em;
  background-color: #ff4444;
  border-radius: 50%;
  /*margin-top: 1em;*/
  box-shadow: 0 0 0.5em rgba(255, 68, 68, 0.5);
}
</style>
